<template>
	<view class="">
		<view class="header">
			<view class="header__hd"><image src="/static/images/logo.png"></image></view>
			<view class="header__bd">WxP UI 是一款提供高交互小程序插件的合集, 致力于简洁和高可用性的插件实现.</view>
		</view>

		<view class="cells">
			<view class="title">
				<view class="title__bd">多功能列表</view>
				<view class="title__ft"><image src="/static/images/main/list.png"></image></view>
			</view>

			<navigator url="/pages/swipe-list/index" hover-class="hover" :hover-start-time="0" class="cell"><view class="cell__bd">swipe-list</view></navigator>
			<navigator url="/pages/tab/index" hover-class="hover" :hover-start-time="0" class="cell"><view class="cell__bd">tab</view></navigator>
			<navigator url="/pages/scroll/index" hover-class="hover" :hover-start-time="0" class="cell"><view class="cell__bd">scroll</view></navigator>
			<navigator url="/pages/add-cart/index" hover-class="hover" :hover-start-time="0" class="cell"><view class="cell__bd">add-cart</view></navigator>
		</view>

		<view class="cells">
			<view class="title">
				<view class="title__bd">拖拽</view>
				<view class="title__ft"><image src="/static/images/main/drag.png"></image></view>
			</view>
			<navigator url="/pages/drag/index" hover-class="hover" :hover-start-time="0" class="cell"><view class="cell__bd">drag</view></navigator>
		</view>

		<view class="cells">
			<view class="title">
				<view class="title__bd">索引列表</view>
				<view class="title__ft"><image src="/static/images/main/index-list.png"></image></view>
			</view>
			<navigator url="/pages/index-list/index" hover-class="hover" :hover-start-time="0" class="cell"><view class="cell__bd">index-list</view></navigator>
		</view>

		<view class="cells">
			<view class="title">
				<view class="title__bd">日历</view>
				<view class="title__ft"><image src="/static/images/main/date.png"></image></view>
			</view>
			<navigator url="/pages/date/index" hover-class="hover" :hover-start-time="0" class="cell"><view class="cell__bd">date-picker</view></navigator>
		</view>

		<view class="cells">
			<view class="title">
				<view class="title__bd">侧滑</view>
				<view class="title__ft"><image src="/static/images/main/side-slip.png"></image></view>
			</view>
			<navigator url="/pages/side-slip/index" hover-class="hover" :hover-start-time="0" class="cell"><view class="cell__bd">side-slip</view></navigator>
		</view>

		<view class="footer">
			<image src="/static/images/logo.png"></image>
			<text>Powered by SingleTouch</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {}
	},
	onShareAppMessage(options) {
		let that = this
		// 设置菜单中的转发s按钮触发转发事件时的转发内容
		let shareObj = {
			title: 'WxP UI', // 默认是小程序的名称(可以写slogan等)
			imageUrl: '/static/images/share.png', //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
			success(res) {
				// 转发成功之后的回调
				if (res.errMsg == 'shareAppMessage:ok') {
				}
			},
			fail() {
				// 转发失败之后的回调
				if (res.errMsg == 'shareAppMessage:fail cancel') {
					// 用户取消转发
				} else if (res.errMsg == 'shareAppMessage:fail') {
					// 转发失败，其中 detail message 为详细失败信息
				}
			},
			complete() {
				// 转发结束之后的回调（转发成不成功都会执行）
			}
		}
		// 来自页面内的按钮的转发
		if (options.from == 'button') {
		}
		// 返回shareObj
		return shareObj
	},
	onLoad(query) {
		if (query.scene && query.scene != 'main') {
			uni.navigateTo({
				url: `/pages/${query.scene}/index`
			})
		}
	}
}
</script>

<style lang="scss">
@import '~@/common/css/variables';

page {
	padding-bottom: 1rpx;
}

.cells {
	background: #ffffff;
	margin: 30rpx;
	position: relative;
	box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);

	&::before,
	&::after {
		content: '';
		position: absolute;
		z-index: -1;
		bottom: 30rpx;
		left: 20rpx;
		width: 50%;
		height: 20%;
		box-shadow: 0 30rpx 20rpx rgba(0, 0, 0, 0.2);
		transform: rotate(-3deg);
	}

	&::after {
		right: 20rpx;
		left: auto;
		transform: rotate(3deg);
	}
}

.title {
	position: relative;
	display: flex;
	align-items: center;
	padding: 30rpx;
	color: $mainColor;
	font-weight: bold;
	font-size: 36rpx;

	&.hover {
		color: $mainColorActive;
	}

	&:after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		border-bottom: 1px solid $lineColor;
		transform-origin: 0% 100%;
		transform: scaleY(0.5);
	}

	&__bd {
		flex: 1;
	}

	&__ft {
		font-size: 0;

		image {
			width: 60rpx;
			height: 60rpx;
		}
	}

	.iconfont {
		font-size: 40rpx;
	}
}

.cell {
	position: relative;
	display: flex;
	padding: 30rpx 70rpx 30rpx 30rpx;
	transition: background-color 0.3s;
	font-size: 32rpx;

	&:not(:last-child) {
		&:before {
			content: '';
			position: absolute;
			bottom: 0;
			left: 30rpx;
			right: 0;
			border-bottom: 1px solid $lineColor;
			transform-origin: 0% 100%;
			transform: scaleY(0.5);
		}
	}

	&:after {
		content: ' ';
		display: inline-block;
		height: 12rpx;
		width: 12rpx;
		border-width: 4rpx 4rpx 0 0;
		border-color: #c6c6c6;
		border-style: solid;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		position: absolute;
		top: 50%;
		right: 45rpx;
		margin-top: -8rpx;
	}

	&__bd {
		flex: 1;
	}

	&.hover {
		background-color: $hoverBd;
	}
}

.header {
	margin: 60rpx 40rpx;
	display: flex;
	align-items: center;
	&__hd {
		font-size: 0;
		image {
			width: 150rpx;
			height: 150rpx;
			margin-right: 40rpx;
		}
	}
	&__bd {
		flex: 1;
		font-size: 24rpx;
		color: $mainBlack2;
	}
}

.footer {
	text-align: center;
	margin: 60rpx;
	color: $mainBlack3;
	font-size: 24rpx;
	image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
		vertical-align: middle;
	}
	text {
		vertical-align: middle;
	}
}
</style>
